{include file="public/_head" /}
<!-- /Navbar -->
<!-- Main Container -->
<div class="main-container container-fluid">
    <!-- Page Container -->
    <div class="page-container">

        <!-- Page Sidebar -->
        {include file="public/_left" /}
        <!-- /Page Sidebar -->
        <!-- Page Content -->
        <div class="page-content">
            <!-- Page Breadcrumb -->
            <div class="page-breadcrumbs">
                <ul class="breadcrumb">
                    <li class="active">
                        <i class="fa fa-home"></i>&nbsp;前台首页
                    </li>
                    <li>
                        添加滚图
                    </li>
                </ul>
            </div>
            <!-- /Page Breadcrumb -->
            <!-- Page Body -->
            <div class="page-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="widget radius-bordered">
                            <div class="widget-header bordered-bottom bordered-themeprimary">
                                <span class="widget-caption">添加滚图</span>
                            </div>
                            <div class="widget-body">
                                <form action="{:url('admin/picture/add')}" id="mycarousel" class="form-horizontal" enctype="multipart/form-data">
                                    <div class="form-group layui-upload">
                                        <label for="test1" class="col-sm-2 control-label no-padding-right"></label>
                                        <div class="col-sm-6">
                                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                                            <div class="layui-upload-list">
                                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                                    预览图：
                                                    <div class="layui-upload-list img-responsive" id="demo2"></div>
                                                </blockquote>
                                                <p id="demoText"></p>
                                                <p class="help-block">注：请统一上传像素长536px ，宽300px ，且小于300k的图片</p>
                                            </div>
                                            <input type="hidden" name="images" id="images">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" id="" class="btn btn-primary">添加</button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Page Body -->
        </div>
        <!-- /Page Content -->

    </div>
    <!-- /Page Container -->
    <!-- Main Container -->

</div>
{include file="public/_js" /}

<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //多图片上传
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:url('admin/carousel/upload')}"
            ,size:300
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img layui-upload-list">')
                });
            }
            ,done: function(res){
                //上传成功
                if(res.code == 1){
                    $('#images').val(res.url);
                    return layer.msg(res.msg);
                }else {
                    //如果上传失败
                    return layer.msg(res.msg);
                }

            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });

    //表单提交
   $('form').submit(function () {
       var res = $(this).serialize();
       var url = $(this).attr('action');
       $.ajax({
           url:url,
           data:res,
           type:'post',
           success:function (data) {
               if (data.code == 1){
                   layer.msg(data.msg,{
                      icon:6,
                      time:1200
                   },function () {
                       window.location.href = "{:url('admin/picture/all')}";
                   });
               }else {
                   layer.alert(data.msg,{
                      icon: 5,
                      anim:6
                   },function (index) {
                       layer.close(index);
                   });
               }
           }
       });
       return false;
   });
</script>